<template>
	<view class="index">
		
		<uni-nav-bar v-if="navBarShowTag">
			<view class="tabs-box">
				<view class="one-nav" :class="currentSwiperIndex===0?'nav-actived':''" @tap="swiperChange(0)">推荐</view>
				<view class="one-nav" :class="currentSwiperIndex===1?'nav-actived':''" @tap="swiperChange(1)">咨询</view>
			</view>
		</uni-nav-bar>
		
		<view class="header-box">
				<!-- 顶部广告位轮播图 -->
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
						<swiper-item v-for="item in swiperAdList" :key="item.id">
							<navigator open-type="navigate" :url=" '/pages/webview/webview?url='+item.data.link">
								<image class="banner-swiper-img" :src="item.data.image" mode="aspectFill" />
							</navigator>
						</swiper-item>
					<!-- 	<swiper-item>
							<navigator url="http://baidu.com" >
								<image class="banner-swiper-img" src="/static/imgs/1.jpg" mode="aspectFill"></image>
							</navigator>
							<navigator open-type="navigate" :url=" '/pages/webview/webview?url='+ encodeURI('http://baidu.com')">
								<image class="banner-swiper-img" src="/static/imgs/1.jpg" mode="aspectFill" />
							</navigator>
						</swiper-item> -->
					
				</swiper>
				<!-- 遮罩使用弧形框 -->
				<image class="crile" src="@/static/crile.png" mode="aspectFill" />
				<!-- 两个选项按钮 -->
				<view class="card-header">
						<view class="card-one card-left" @tap="gotoFeeds('/pages/feeds/feeds')">
							<image class="img" src="@/static/coffee.png" mode="aspectFill" />
							<view class="iright">
								<view class="title">精彩动态</view>
							</view>
						</view>
						<view class="card-one card-right" @tap="gotoFeeds('/pages/me/me')">
							<image class="img" src="@/static/ran.png" mode="aspectFill" />
							<view class="iright">
								<view class="title">个人中心</view>
							</view>
						</view>
				</view>
					<!-- Tab 选项卡 -->
				<view class="tabs-box">
				<view class="one-nav" :class="currentSwiperIndex === 0 ? 'nav-actived' : '' " @tap="swiperChange(0)">推荐</view>
				<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived' : '' " @tap="swiperChange(1)">资讯</view>
			</view>
			
		</view>
		
		<swiper  class="swiper-box" :style="'height:'+ swiperSliderHeight" :current="currentSwiperIndex" @animationfinish="swiperSilder">
			<!-- 推荐动态实现 -->
			<swiper-item class="swiper-item sns-now">
				<view class="feeds-box">
					<sns-waterfall v-model="feedsList" ref="waterfall">
						<template v-slot:left="{leftList}">
							<view class="feed-one" v-for="(item, index) in leftList" :key="index">
								<navigator open-type="navigate" :url=" '/subpages/feedinfo/feedinfo?id=' + item.id">
									<image class="feed-img" :src="item.cover" mode="widthFix" :lazy-load="true" />
									<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{ item.feed_content }}</view>
									<view class="feed-info">
										<view class="iview">
											<image class="avatar" :src=" item.avatar" />
											<text class="name u-line-1">{{ item.name }}</text>
										</view>
										<view class="iview">
											<view class="ilike" @tap.stop="clickLove(item)">
												<image v-if="item.has_like" src="@/static/lover.png" class="micon" />
												<image v-else src="@/static/love.png" class="micon" />
												<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
											</view>
										</view>
									</view>
								</navigator>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="feed-one" v-for="(item, index) in rightList" :key="index">
								<navigator open-type="navigate" :url=" '/subpages/feedinfo/feedinfo?id=' + item.id">
									<image class="feed-img" :src="item.cover" mode="widthFix" :lazy-load="true" />
									<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{ item.feed_content }}</view>
									<view class="feed-info">
										<view class="iview">
											<image class="avatar" :src=" item.avatar" />
											<text class="name u-line-1">{{ item.name }}</text>
										</view>
										<view class="iview">
											<view class="ilike" @tap.stop="clickLove(item)">
												<image v-if="item.has_like" src="@/static/lover.png" class="micon" />
												<image v-else src="@/static/love.png" class="micon" />
												<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
											</view>
										</view>
									</view>
								</navigator>
							</view>
						</template>
					</sns-waterfall>
					<!-- <view class="feed-one" v-for="(item, index) in feedsList" :key="index">
						<navigator open-type="navigate" :url=" '/subpages/feedinfo/feedinfo?id=' + item.id">
							<image class="feed-img" :src="item.cover" mode="widthFix" :lazy-load="true" />
							<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{ item.feed_content }}</view>
							<view class="feed-info">
								<view class="iview">
									<image class="avatar" :src=" item.avatar" />
									<text class="name u-line-1">{{ item.name }}</text>
								</view>
								<view class="iview">
									<view class="ilike" @tap.stop="clickLove(item)">
										<image v-if="item.has_like" src="@/static/lover.png" class="micon" />
										<image v-else src="@/static/love.png" class="micon" />
										<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
									</view>
								</view>
							</view>
						</navigator>
					</view> -->
				</view>
			</swiper-item>
			<!-- 资讯列表实现 -->
			<swiper-item class="swiper-item sns-news">
				
				<!-- <view class="">
					...资讯页面列表展示
				</view> -->
				<view v-for="(item, index) in newsList" :key="index">
					<navigator class="one-new" open-type="navigate" :url=" '/subpages/newInfo/newInfo?id=' + item.id">
						<view class="left">
							<view class="title u-line-2">{{item.title}}</view>
							<view class="uinfo">
								<view class="iview">
									<view class="utime">
										<text class="name">{{ item.author }}</text>
									</view>
								</view>
								<text class="uptime">{{ item.created_at | timeFormate }}发布</text>
							</view>
						</view>
						<view class="right">
							<image class="pic" mode="aspectFill" :src="item.cover" />
						</view>
					</navigator>
				</view>
			</swiper-item>
		</swiper>
		
		<goto-share />
		<login ref="login" v-if="!loginState"/>
	</view>
	
</template>

<script>
	import todoLoveMixin from '@/mixins/todoLove.js'
	import {mapState} from 'vuex'
	import snsWaterfall from '@/components/sns-waterfall.vue';
	import timeFrom from '@/tools/timeFrom.js';
	export default {
		components:{
			snsWaterfall
		},
		mixins:[todoLoveMixin],
		data() {
			return {
				//轮播图信息
				swiperAdList:[],
				feedsList:[],
				newsList:[],
				currentSwiperIndex:0,
				swiperSliderHeight:'1000px',
				//推荐动态轮播器高度
				swiperSliderFeedsHeight:'0px',
				//咨询轮播器高度
				swiperSliderNewHeight:'0px',
				//navbar显示状态控制
				navBarShowTag:false,
				//记录滚动所在的位置
				oldFeedsScrollTop:0,
				oldNewsScrollTop:0
			}
		},
		computed:{
			...mapState(['loginState'])
		},
		 onLoad() {
		  this.getAds()
		  this.getFeeds()
		  this.getNews()
		  //用户登陆后触发的行为
		  uni.$on('indexUserLogin',()=>{
			  this.currentSwiperIndex = 0;
			  this.feedsList = []
			  this.$refs.waterfall.clear()
			  this.getFeeds()
		  })
		  //用户登陆 meUserLogout
		  uni.$on('meUserLogout',()=>{
		  			  this.currentSwiperIndex = 0;
		  			  this.feedsList = []
		  			  this.$refs.waterfall.clear()
		  			  this.getFeeds()
		  })
		  //用户点赞后的触发行为
		  uni.$on('indexFeedLoveChange',item=>{
			this.$refs.waterfall.modify(item.id,"like_count",item.like_count)
			this.$refs.waterfall.modify(item.id,"has_like",item.has_like)
		  })
		  //用户发布了新动态后触发的行为
		  uni.$on('indexFeedsUpdate',()=>{
			  this.currentSwiperIndex = 0;
			  this.feedsList = []
			  this.$refs.waterfall.clear()
			  this.getFeeds()
		  })
		},
		//顶部下拉，更新数据
		onPullDownRefresh(){
			 this.getAds()
			 if(this.currentSwiperIndex===0){
				 this.$refs.waterfall.clear()
				 this.getFeeds()
			 }else{
				 this.getNews()
			 }
		},
		//下拉置底，更新数据
		onReachBottom(){
			if(this.currentSwiperIndex===0){
				this.getFeeds()
			}else{
				this.getNews()
			}
		},
		onPageScroll(event) {
			if(this.currentSwiperIndex === 0){
				this.oldFeedsScrollTop = event.scrollTop
			}else{
				this.oldNewsScrollTop = event.scrollTop
			}
			if(event.scrollTop>220){
				this.navBarShowTag = true
			}else{
				this.navBarShowTag = false
			}
		},
		filters: {
					timeFormate(timeDate) {
						let Time = new Date(timeDate);
						let timestemp = Time.getTime();
						let t = timeFrom(timestemp, "yyyy年mm月dd日");
						return t;
					}
				},
		methods: {
			async getNews(){
				let news = await this.$u.api.getNews()
			    let newsList = news.map(item=>{
					return{
						...item,
						cover:this.BaseFileURL + item.image.id
					}
				})
				this.newsList = [...this.newsList,...newsList]
				this.swiperSliderNewHeight = (this.newsList.length * 95 +100)+'px'
				this.swiperSliderHeight = this.swiperSliderNewHeight
			},
			async getFeeds(){
				let feeds = await this.$u.api.getFeeds()
				let feedsList = feeds.feeds.map(item=>{
					return {
						...item,
						cover:this.BaseFileURL + item.images[0].file,
						avatar:!!item.useravatar?item.user.avatar.url:'/static/nopic.png',
						name:item.user.name,
					}
				})
				this.feedsList = [...this.feedsList,...feedsList]
				uni.$on('swiperHeightChange',height=>{
					console.log('计算出来的高度是？',height)
					this.swiperSliderHeight = height
					//记录当前的高度
					this.swiperSliderFeedsHeight = height
				})
			},
			async getAds(){
				this.swiperAdList = await this.$u.api.getAdvert()
			},
			//点击切换
			swiperChange(index){
				if(index === 0){
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					let timer = setTimeout(()=>{
						uni.pageScrollTo({
							duration:0,
							scrollTop:this.oldFeedsScrollTop
						})
					},1000)
					
					clearTimeout(timer)
				}else{
					this.swiperSliderHeight = this.swiperSliderNewHeight
					uni.pageScrollTo({
						duration:0,
						scrollTop:this.oldNewsScrollTop
					})
				}
				this.currentSwiperIndex = index
				
			},
			//滑动切换
			swiperSilder(event){
				let index = event.detail.current
				if(index === 0){
					this.swiperSliderHeight = this.swiperSliderFeedsHeight
					console.log(this.oldFeedsScrollTop,'ddd')
					uni.pageScrollTo({
						duration:0,
						scrollTop:this.oldFeedsScrollTop
					})
				}else{
					this.swiperSliderHeight = this.swiperSliderNewHeight
					
				}
				this.currentSwiperIndex = index
			},
			gotoFeeds(url){
				uni.switchTab({
					url
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	#sns {
		background-color: #f1f1f1;
	}

	// 推荐、咨询 按钮样式
	.tabs-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 750upx;

		.one-nav {
			width: 120upx;
			color: #9B9B9B;
			font-size: 36upx;
			text-align: center;
			font-weight: blod;

			&.nav-actived {
				color: #0050FF;
			}
		}
	}

	.header-box {
		position: relative;
		left: 0;
		height: 500upx;
		background-color: #f1f1f1;
		z-index: 1;

		// 广告位轮播器相关样式
		.swiper {
			width: 750upx;
			height: 400upx;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;
			z-index: 1;

			.banner-swiper-img {
				width: 750upx;
				height: 400upx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
			}
		}

		.crile {
			width: 750upx;
			height: 50upx;
			position: absolute;
			left: 0;
			top: 355upx;
			z-index: 9;
		}

		// 新鲜事 活动墙 按钮样式
		.card-header {
			position: absolute;
			left: 0;
			top: 320upx;
			height: 160upx;
			z-index: 99;
			width: 710upx;
			margin-left: 20upx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;

			.card-one {
				width: 328upx;
				height: 96upx;
				border-radius: 49upx;
				background-color: #fff;
				margin: 0 10upx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;

				.img {
					width: 44upx;
					height: 44upx;
					margin-left: 50upx;
				}

				.iright {
					margin-left: 30upx;
					text-align: left;
					color: #888;

					.title {
						font-size: 30upx;
						color: #001432;
					}

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						font-size: 20upx;
						margin-top: -5upx;
					}
				}
			}
		}

		// 推荐、咨询 按钮样式
		.tabs-box {
			width: 750upx;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 480upx;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.one-nav {
				height: 80upx;
				width: 110upx;
				color: #9B9B9B;
				font-size: 36upx;
				text-align: center;
				font-weight: blod;

				&.nav-actived {
					color: #0050FF;
				}
			}
		}
	}

	// 此刻 栏目样式\
	.swiper-box {
		background-color: #f1f1f1;
		padding: 60upx 0 40upx;
	}

	.sns-now {

		// 动态相关瀑布流样式
		.feeds-box {
			width: 735upx;
			margin-left: 13upx;
			padding-bottom: 20upx;

			.feed-one {
				width: 358upx;
				margin-bottom: 12upx;
				background-color: #FFF;
				border-radius: 20upx;

				position: relative;

				.feed-img {
					width: 358upx;
					height: 300upx;
					border-radius: 10upx;
				}

				.feed-title {
					width: 350upx;
					margin-top: 15upx;
					margin-left: 10upx;
					font-size: 28upx;
					line-height: 40upx;
					color: #001432;
					text-align: left;
				}

				.feed-info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10upx;
					font-size: 20upx;
					color: #666;
					padding: 0 10upx 16upx;

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;

						.ilike {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
							align-items: center;
							align-content: center;
							height: 60upx;
							padding: 0 10upx;
							background-color: #FFFFFF;
						}
					}

					.avatar {
						margin-right: 10upx;
						height: 40upx;
						width: 40upx;
						border-radius: 50%;
						border: 1upx solid #eee;
					}

					.name {
						max-width: 120upx;
						color: #757474;
					}

					.micon {
						width: 32upx;
						height: 28upx;
					}

					.love-count {
						padding-left: 10upx;
						color: #757474;
					}
				}
			}
		}
	}

	// 轮播页面 资讯
	.sns-news {
		background-color: #fff;
		width: 750upx;

		.one-new {
			width: 700upx;
			height: 74px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: flex-start;
			align-content: center;
			padding-bottom: 10px;
			padding-top: 10px;
			padding-left: 25upx;
			padding-right: 25upx;
			border-bottom: 1px solid #f1f1f1;

			.left {
				width: 490upx;
				height: 140upx;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.title {
					font-size: 30upx;
					line-height: 42upx;
					color: #001432;
					margin-top: 21upx;
				}

				.uinfo {
					width: 490upx;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 6upx;
					font-size: 20upx;
					color: #999;

					.utime {
						font-size: 24upx;

						.name {
							max-width: 120upx;
							color: #777;
						}
					}
				}
			}

			.right {
				width: 120upx;

				.pic {
					width: 120upx;
					height: 120upx;
					margin-top: 20upx;
					border-radius: 6upx;
				}
			}
		}
	}
</style>
